<template>
  <a-config-provider :locale="state.locale">
    <a-layout id="components-layout-demo-top"
              class="layout">
      <a-layout-header>
        <div class="logo" />
        <a-menu theme="dark"
                mode="horizontal"
                v-model:selectedKeys="state.selectedKeys"
                :style="{ lineHeight: '64px' }">
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="/plan">
            <router-link to="/plan">时间计划</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content style="padding: 0 50px">
        <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
          <a-row>
            <a-col :span="6">
              <a-card title="计划总用时"
                      style="width:100%">
                <p>总共时长是:{{allTime}}</p>
              </a-card>
            </a-col>
            <a-col :span="16"
                   :offset="2">
              <router-view></router-view>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <span @click="msgClick">{{msg}}</span>
      </a-layout-footer>
    </a-layout>
  </a-config-provider>
</template>
<script lang="ts">
  import { Options, Vue } from "vue-class-component";
  import { Watch } from "vue-property-decorator";
  import zhCN from "ant-design-vue/es/locale/zh_CN";
  interface State {
    locale: Object;
    selectedKeys: Array<String>;
    msg?: String;
  }
  interface Route {
    path: String;
  }
  @Options({
    props: {
      msg: String,
      allTime: Number
    },
  })
  export default class Header extends Vue {
    private msg!: string;
    private state: State = {
      locale: zhCN,
      selectedKeys: ["/"],
    };
    private msgClick() {
      console.log(this.msg);
    }
    created() {
      this.state.selectedKeys = [this.$route.path];
    }
    @Watch("$route")
    private onRouteChange(route: Route) {
      this.state.selectedKeys = [route.path];
    }
  }
</script>